import React from 'react'
import MyIcon from '../MyIcon';

import styled from 'styled-components';
import getIcon from '../MyIcon';

export const CountC = styled.section`
  background: rgba(8,128,223,0.1);
  min-height: 60px;
  display: flex;
  justify-content: center;
  margin-top: -16px;
  margin-bottom: 10px;
`
export const CountItem = styled.section`
  display: inline-block;
  padding: 0 30px;
  font-size: 18px;
  font-weight: 400;
  min-width: ${props => props.width || '320px'};
  color: ${props => props.color} !important;
  text-align: center;
  line-height: 60px;
  height: 60px;
  i {
    display: inline-block;
    font-size: 20px;
    margin-right: 5px;
    color: ${props => props.color} !important;
  }
  span {
    display: inline-block;
    vertical-align: baseline;
    &:first-child {
      margin-left: 10px;
    }
    &:last-child {
      margin-left: 20px;
    }
  }
`


const CountList = ({ data = [] }) => {
  return (
    <CountC>
      {
        Array.isArray(data) && data.map(v => (
          <CountItem color={v.color} width={v.width} key={v.type}>
            {v.icon && getIcon(v.icon)}
            <span>{v.name}</span>
            <span>{v.count}</span>
          </CountItem>
        ))
      }
    </CountC>
  )
}

export default CountList;